import { GameModeManager, GameMode } from '@/core/GameModeManager';

export class GameModeUI {
  private gameModeManager: GameModeManager;
  private uiElement: HTMLElement | null = null;
  private isVisible = false;

  constructor(gameModeManager: GameModeManager) {
    this.gameModeManager = gameModeManager;
    this.createUI();
    this.setupEventListeners();
  }

  private createUI(): void {
    this.uiElement = document.createElement('div');
    this.uiElement.id = 'game-mode-ui';
    this.uiElement.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.9);
      border: 2px solid #666;
      border-radius: 10px;
      padding: 30px;
      z-index: 3000;
      display: none;
      color: white;
      font-family: 'Courier New', monospace;
      min-width: 400px;
    `;

    // 创建标题
    const title = document.createElement('h2');
    title.textContent = 'Select Game Mode';
    title.style.cssText = `
      margin: 0 0 20px 0;
      text-align: center;
      color: #fff;
      font-size: 24px;
    `;
    this.uiElement.appendChild(title);

    // 创建模式选择容器
    const modesContainer = document.createElement('div');
    modesContainer.style.cssText = `
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 20px;
    `;

    // 为每个游戏模式创建选项
    const modes = this.gameModeManager.getAllModes();
    modes.forEach(mode => {
      const modeOption = this.createModeOption(mode);
      modesContainer.appendChild(modeOption);
    });

    this.uiElement.appendChild(modesContainer);

    // 创建按钮容器
    const buttonContainer = document.createElement('div');
    buttonContainer.style.cssText = `
      display: flex;
      gap: 10px;
      justify-content: center;
    `;

    // 创建确认按钮
    const confirmButton = document.createElement('button');
    confirmButton.textContent = 'Confirm';
    confirmButton.style.cssText = `
      padding: 10px 20px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    `;
    confirmButton.addEventListener('click', () => this.confirmSelection());
    buttonContainer.appendChild(confirmButton);

    // 创建取消按钮
    const cancelButton = document.createElement('button');
    cancelButton.textContent = 'Cancel';
    cancelButton.style.cssText = `
      padding: 10px 20px;
      background: #666;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    `;
    cancelButton.addEventListener('click', () => this.hide());
    buttonContainer.appendChild(cancelButton);

    this.uiElement.appendChild(buttonContainer);

    document.body.appendChild(this.uiElement);
  }

  private createModeOption(mode: GameMode): HTMLElement {
    const config = this.gameModeManager.getModeConfig(mode);
    if (!config) return document.createElement('div');

    const option = document.createElement('div');
    option.className = 'game-mode-option';
    option.dataset.mode = mode;
    option.style.cssText = `
      padding: 15px;
      border: 2px solid #666;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.05);
    `;

    // 模式名称
    const modeName = document.createElement('h3');
    modeName.textContent = this.getModeDisplayName(mode);
    modeName.style.cssText = `
      margin: 0 0 10px 0;
      color: ${this.getModeColor(mode)};
      font-size: 18px;
    `;
    option.appendChild(modeName);

    // 模式描述
    const description = document.createElement('p');
    description.textContent = config.description;
    description.style.cssText = `
      margin: 0 0 10px 0;
      color: #ccc;
      font-size: 14px;
      line-height: 1.4;
    `;
    option.appendChild(description);

    // 能力列表
    const capabilities = document.createElement('div');
    capabilities.style.cssText = `
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    `;

    const capabilityTags = this.getCapabilityTags(config.capabilities);
    capabilityTags.forEach(tag => {
      const tagElement = document.createElement('span');
      tagElement.textContent = tag;
      tagElement.style.cssText = `
        background: rgba(76, 175, 80, 0.3);
        color: #4CAF50;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        border: 1px solid #4CAF50;
      `;
      capabilities.appendChild(tagElement);
    });

    option.appendChild(capabilities);

    // 添加点击事件
    option.addEventListener('click', () => this.selectMode(mode));
    option.addEventListener('mouseenter', () => {
      option.style.borderColor = this.getModeColor(mode);
      option.style.background = 'rgba(255, 255, 255, 0.1)';
    });
    option.addEventListener('mouseleave', () => {
      if (!option.classList.contains('selected')) {
        option.style.borderColor = '#666';
        option.style.background = 'rgba(255, 255, 255, 0.05)';
      }
    });

    return option;
  }

  private getModeDisplayName(mode: GameMode): string {
    const names: Record<GameMode, string> = {
      [GameMode.SURVIVAL]: 'Survival',
      [GameMode.CREATIVE]: 'Creative',
      [GameMode.HARDCORE]: 'Hardcore',
      [GameMode.SPECTATOR]: 'Spectator'
    };
    return names[mode] || mode;
  }

  private getModeColor(mode: GameMode): string {
    const colors: Record<GameMode, string> = {
      [GameMode.SURVIVAL]: '#4CAF50',
      [GameMode.CREATIVE]: '#2196F3',
      [GameMode.HARDCORE]: '#F44336',
      [GameMode.SPECTATOR]: '#9E9E9E'
    };
    return colors[mode] || '#666';
  }

  private getCapabilityTags(capabilities: any): string[] {
    const tags: string[] = [];
    
    if (capabilities.canFly) tags.push('Flight');
    if (capabilities.invulnerable) tags.push('Invulnerable');
    if (capabilities.infiniteResources) tags.push('Infinite Resources');
    if (!capabilities.canInteract) tags.push('No Interaction');
    if (!capabilities.canBreakBlocks) tags.push('No Breaking');
    if (!capabilities.canPlaceBlocks) tags.push('No Placing');
    
    return tags;
  }

  private selectMode(mode: GameMode): void {
    // 移除之前的选择
    const options = this.uiElement?.querySelectorAll('.game-mode-option');
    options?.forEach(option => {
      option.classList.remove('selected');
      (option as HTMLElement).style.borderColor = '#666';
      (option as HTMLElement).style.background = 'rgba(255, 255, 255, 0.05)';
    });

    // 选择新模式
    const selectedOption = this.uiElement?.querySelector(`[data-mode="${mode}"]`);
    if (selectedOption) {
      selectedOption.classList.add('selected');
      (selectedOption as HTMLElement).style.borderColor = this.getModeColor(mode);
      (selectedOption as HTMLElement).style.background = 'rgba(255, 255, 255, 0.15)';
    }
  }

  private confirmSelection(): void {
    const selectedOption = this.uiElement?.querySelector('.game-mode-option.selected');
    if (selectedOption) {
      const mode = (selectedOption as HTMLElement).dataset.mode as GameMode;
      if (mode) {
        this.gameModeManager.switchMode(mode);
        this.showNotification(`Game mode changed to ${this.getModeDisplayName(mode)}`);
      }
    }
    this.hide();
  }

  private setupEventListeners(): void {
    // ESC键关闭界面
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && this.isVisible) {
        this.hide();
      }
    });
  }

  public show(): void {
    if (this.uiElement) {
      this.uiElement.style.display = 'block';
      this.isVisible = true;
      
      // 选择当前模式
      const currentMode = this.gameModeManager.getCurrentMode();
      this.selectMode(currentMode);
      
      // 暂停游戏
      document.body.style.cursor = 'default';
    }
  }

  public hide(): void {
    if (this.uiElement) {
      this.uiElement.style.display = 'none';
      this.isVisible = false;
      
      // 恢复游戏
      document.body.style.cursor = '';
    }
  }

  public toggle(): void {
    if (this.isVisible) {
      this.hide();
    } else {
      this.show();
    }
  }

  public isOpen(): boolean {
    return this.isVisible;
  }

  private showNotification(message: string): void {
    const notification = document.createElement('div');
    notification.textContent = message;
    notification.style.cssText = `
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(76, 175, 80, 0.9);
      color: white;
      padding: 15px 25px;
      border-radius: 8px;
      z-index: 4000;
      font-weight: bold;
      pointer-events: none;
      font-size: 16px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    `;
    
    document.body.appendChild(notification);
    
    // 3秒后移除通知
    setTimeout(() => {
      if (notification.parentNode) {
        document.body.removeChild(notification);
      }
    }, 3000);
  }
}